<template>
   <div class="goodsDetail-container">
     <van-loading v-show="isLoading"  class="loading" size="24px" color="#42bBaa" vertical>加载中...</van-loading>
     <nav-bar>
       <div class="left" slot="left" @click="goBack">
         <i class="iconfont icon-fanhui"></i>
       </div>
       <div slot="center">商品详情</div>
     </nav-bar>
     <div class="detail-container">
       <div class="goods-img">

         <van-image
             width="100%"
             height="100%"
             @click="getImgPri"
             :src="currentGoodInfo.cover_url"
         />
       </div>
       <div class="info">
         <van-card style="text-align: left"
             :price="currentGoodInfo.price + '.00'"
             :desc="currentGoodInfo.description"
             :title="currentGoodInfo.title"
         >
           <template #tags class="tag">
             <van-tag plain type="danger">新书</van-tag>
             <van-tag plain type="danger">推荐</van-tag>
           </template>
           <template #footer>
             <van-button  round  type="warning" @click="addCart(currentGoodInfo)">加入购物车</van-button>
             <van-button  round type="danger">立即购买</van-button>
           </template>
         </van-card>


         <van-tabs v-model="active">
           <van-tab title="概述">
             <div class="content" v-html="currentGoodInfo.details"></div>
           </van-tab>
           <van-tab title="热评">
             <div class="comment">
               <div v-if="currentGoodInfo.comments === []">暂无内容!</div>
             </div>
           </van-tab>
           <van-tab title="相关图书">
             <div class="goods-container">
               <div class="goods-item"  v-for="(item,index) in like_goods" :key="index">
                 <div class="good-img"><img :src="item.cover_url" lazy-load alt=""></div>
                 <p class="title">{{ item.title }}</p>
                 <div class="good-info">
                   <span class="price">￥ {{ item.price }}</span>
                   <div class="shoucang">
                     <i class="iconfont icon-shoucang"></i>
                     <span class="count">{{ item.collects_count }}</span>
                   </div>
                 </div>
               </div>
             </div>
           </van-tab>
         </van-tabs>

       </div>
     </div>
   </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import { getGoodsDetail } from "../../api/goods/goodsDetail";
import {addCart} from "../../api/cart/cart";
import {ImagePreview, Toast} from "vant";
export default {
  name: "GoodsDetail",
  components:{
    NavBar
  },
  data(){
    return{
      currentGoodId:0,
      currentGoodInfo:{},
      images:[],
      img:'https://img01.yzcdn.cn/vant/apple-1.jpg',
      active:'0',
      like_goods:[],
      isLoading:true
    }
  },
  mounted() {
    this.active = '0'
    this.currentGoodId = this.$route.query.goodsId
    this.getCurrentGoodDetail(this.currentGoodId)
  },
  activated() {
    this.currentGoodId = this.$route.query.goodsId
    this.getCurrentGoodDetail(this.currentGoodId)
  },
  destroyed() {
    this.active = '0'
  },
  methods:{
    // 获取商品详情
    async getCurrentGoodDetail(id){
      const res = await getGoodsDetail(id)
      res ? this.isLoading = false : true
      this.currentGoodInfo = res.data.goods
      this.like_goods = res.data.like_goods
      this.like_goods.map((item) =>{
        return this.images.push(item.cover_url)
      })
    },
    goBack(){
      this.$router.back()
    },
    getImgPri(){
      ImagePreview({
        images: this.images, // 预览图片的那个数组
        showIndex:true,
        loop:false,
        startPosition:0, // 指明预览第几张图
      })
    },
    async addCart(goodsInfo){
      const res = await addCart(goodsInfo)
      if(res.status === 204 || res.status === 201){
        await this.$store.dispatch('cartCount')
        Toast.success({
          message:'已添加到购物车',
          duration:1000
        })
        setTimeout(()=>{
           this.$router.push('/shopCart')
        },1000)
      }
      console.log(res);
    }
  }
}
</script>

<style scoped lang="css">
 .left{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
 .detail-container{
   margin-top: 45px;
 }
 .van-card__title{
   margin-bottom: 5px;
 }
 .van-card__desc {
   margin-bottom: 5px;

 }
 .iconfont{
   font-size: 24px;
 }
 .goods-img{
   width: 100%;
   height: 350px;
 }
 .tag{
   padding: 2px;
 }
 img{
   height: 100%;
   width: 100%;
 }
 .content{
   padding: 10px;
 }
 .content img{

 }
 .goods-container{
   width: 100%;
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
   background-color: #fff;

 }
 .goods-item{
   width: 50%;


 }
 .goods-item img{
   width: 100%;
   height: 100%;
 }
 .good-info{
   display: flex;
   justify-content: center;
   align-items: center;
   /*padding: 4px;*/
 }
 .shoucang{
   margin-left: 8px;
   display: flex;
   align-items: center;
 }
 .title{
   font-size: 16px;
   text-align: center;
 }
 .good-img{
   width: 150px;
   height: 150px;
   margin-left: 20px;
   margin-bottom: 5px;
 }
 .price{
   color: red;
   font-size: 14px;
   text-align: center;
 }
 .count{
   font-size: 14px;
   text-align: center;
 }
 .van-tab__pane{
   position: relative;
 }
 .comment{
   font-size: 18px;
   margin-top: 28px;
   display: flex;
   justify-content: center;
   color: #666666;
 }

</style>
